<template>
	<div class="tabel_Background">
		<div class="tabel_Background-wra">
			<div id="title">
				<span class="title-text">{{ title }}</span>
			</div>
			<div class="type-wra">
				<div class="craft" :class="isClick ? 'active-change' : 'no-active'" @click="isClick = true">
					工艺
				</div>
				<div class="type" :class="!isClick ? 'active-change' : 'no-active'" @click="isClick = false">
					类别
				</div>
			</div>
			<div v-show="type == 'craft'" id="echarts_2" style="width: 100%;height: 80%;"></div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "CraftData",
		props: {
			title: String
		},
		data() {
			return {
				total: 0,
				craftInfor: [],
				type: "craft",
				isClick: true
			};
		},
		mounted() {
			this.getCraftInfor();
			this.drawLine();
		},

		methods: {
			drawLine() {
				var myChart = this.$echarts.init(document.getElementById("echarts_2"));
				let pieData = [];
				let legendData = [];
				let total1 = this.total;
				this.craftInfor.forEach((item, index) => {
					pieData.push({
						name: item.name,
						value: item.value
					});
					legendData.push({
						name: item.name,
						icon: "circle",
						textStyle: {
							color: "#D2D3D8" // 单独设置某一个图列的颜色
						}
					});
				});
				var option = {
					color: [
						"#34a1f3",
						"#e5c93a",
						"#6a6d16",
						"#a4e149",
						"#9c21a7",
						"#ff0000",
						"#ffff7f",
						"#00aa00",
						"#55ffff",
						"#5500ff",
						"#0000d4"
					],
					tooltip: {
						trigger: "item",
						formatter: "{b} : {c} ({d}%)"
					},
					legend: [{
							left: "5%",
							orient: "vertical",
							type: "scroll",
							x: "left",
							top: "18%",
							align: "left",
							itemHeight: 12, //图例的高度
							itemGap: 10, //图例之间的间距
							// top: "7%",
							padding: [5, 20, 10, 5],
							// data: ["酸化联作", "WCP", "加砂联作", "分簇射孔", "TCP"],
							data: legendData.slice(0, 6)
						},
						{
							left: "28%",
							orient: "vertical",
							type: "scroll",
							x: "left",
							// y: 'center',
							itemHeight: 12, //图例的高度
							itemGap: 10, //图例之间的间距
							align: "left",
							top: "18%",
							// formatter: function(name) {
							// 	// 获取legend显示内容
							// 	let data = option.series[0].data;
							// 	let tarValue = 0;
							// 	for (let i = 0, l = data.length; i < l; i++) {
							// 		if (data[i].name == name) {
							// 			tarValue = data[i].value;
							// 		}
							// 	}
							// 	let p = (tarValue / total1 * 100).toFixed(2);
							// 	return name + ' ' + ' ' + p + '%';
							// },
							padding: [5, 20, 10, 5],
							// data: ["酸化联作", "WCP", "加砂联作", "分簇射孔", "TCP"],
							data: legendData.slice(6, 11)
						}
					],

					// calculable: true,
					series: [{
						name: "工艺",
						type: "pie",
						radius: ["40%", "80%"],
						center: ["74%", "50%"],
						roseType: "area",
						avoidLabelOverlap: false,
						label: {
							// show: false,
							// position: 'inside',
							formatter: "{d}%",
							textStyle: {
								fontWeight: "bold",
								fontFamily: "Microsoft YaHei",
								color: "#FAFAFA",
								fontSize: 8
							}
						},
						labelLine: {
							show: true,
							length: 0,
							length2: 5
						},
						data: pieData.sort(function(a, b) {
							return b.value - a.value;
						})
					}]
				};
				myChart.setOption(option);
				window.addEventListener("resize", function() {
					myChart.resize();
				});
			},

			getCraftInfor() {
				(this.craftInfor = [{
						name: "酸化联作",
						value: 800
					},
					{
						name: "加砂联作",
						value: 400
					},
					{
						name: "TCP",
						value: 700
					},
					{
						name: "爆炸松扣",
						value: 550
					},
					{
						name: "连续油管射孔",
						value: 650
					},
					{
						name: "爬行器射孔",
						value: 350
					},
					{
						name: "WCP",
						value: 270
					},
					{
						name: "分簇射孔",
						value: 900
					},
					{
						name: "带压穿孔",
						value: 450
					},
					{
						name: "切割",
						value: 750
					},
					{
						name: "电缆桥塞",
						value: 680
					}
				]),
				this.craftInfor.forEach((item, index) => {
					this.total += item.value;
				});
				// console.log(this.total)
			}
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.tabel_Background {
		margin-bottom: 5px;
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		height: 66%;
		box-sizing: border-box;
		// background: linear-gradient(to left, #206ed4, #206ed4) left top no-repeat,
		//   linear-gradient(to bottom, #206ed4, #206ed4) left top no-repeat,
		//   linear-gradient(to left, #206ed4, #206ed4) right top no-repeat,
		//   linear-gradient(to bottom, #206ed4, #206ed4) right top no-repeat,
		//   linear-gradient(to left, #206ed4, #206ed4) left bottom no-repeat,
		//   linear-gradient(to bottom, #206ed4, #206ed4) left bottom no-repeat,
		//   linear-gradient(to left, #206ed4, #206ed4) right bottom no-repeat,
		//   linear-gradient(to left, #206ed4, #206ed4) right bottom no-repeat;
		// background-size: 3px 10px, 10px 3px, 3px 10px, 10px 3px;
		// background-color: rgb(3, 25, 63);
	}

	.tabel_Background-wra {
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		height: 100%;
		// border: 1px solid rgb(12, 50, 107);
		background-image: url("../../assets/Panel@2x.png");
		// background-image: url('./../../../assets/mobile/pre-share-page@2x.png');
		background-repeat: no-repeat;
		background-size: 100% 100%; // contain; // cover;
		padding: 2%;
		box-sizing: border-box;
	}

	#title {
		width: 22%; //3.02rem;
		height: 11%;
		min-width: 2.96rem;
		text-align: center;
		font-size: 6px;
		background-image: url("../../assets/title_outline@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; //cover;
		position: relative;
	}

	.title-text {
		position: absolute;
		left: 5%;
		top: 17%;
		color: #21beeb;
		font-weight: bold;
	}

	.type-wra {
		position: absolute;
		width: 32%;
		top: 17.5%;
		left: 2.6%;
		z-index: 100;
	}

	.craft {
		float: left;
		text-align: center;
		width: 17%;
		height: 10%;
		// margin-left: 5%;
		font-size: 9px;
		line-height: 200%;
		color: #339ada;
		// background-image: url("../../assets/btn_leibie_pressed@2x.png");
		background-repeat: no-repeat;
		background-size: cover;
		cursor: pointer;
	}

	.craft:hover {
		background-image: url("../../assets/btn_leibie_pressed@2x.png");
	}

	.type {
		float: left;
		width: 17%;
		height: 10%;
		font-size: 9px;
		color: #339ada;
		line-height: 200%;
		color: #339ada;
		// background-image: url("../../assets/btn_leibie_normal@2x.png");
		background-repeat: no-repeat;
		background-size: cover;
		cursor: pointer;
	}

	.type:hover {
		background-image: url("../../assets/btn_leibie_pressed@2x.png");
	}

	.active-change {
		background-image: url("../../assets/btn_leibie_pressed@2x.png");
	}

	.no-active {
		background-image: url("../../assets/btn_leibie_normal@2x.png");
	}
</style>
